<template>
  <div id="oneSelectCharts" class="clearFix bgc-fff card-shadow">
    <div class="clearFix">
      <canvas></canvas>
    </div>
  </div>
</template>

<script>
  import Echarts from 'echarts'
  import * as Utils from '@/utils/index'
  export default {
    name: '',
    props: [],
    components: { },
    data() {
      return {
        chartsData: []
      }
    },
    mounted() {
      // this.getList()
    },
    methods: {
      initCharts(data) {
        console.log('oneSelectCharts-initCharts', data)
        const that = this
        if (data && data.length > 0) {
          that.chartsData = data.filter(item => item.ciams !== '合计')
        }
        // let axisLabelRotate = 0
        // if (that.chartsData.length > 0) {
        //   axisLabelRotate = -20
        // }
        const listOne = []
        that.chartsData.map((item) => {
          listOne.push(item.totalMiles)
        })
        const max = listOne.reduce(function(a, b) { return b > a ? b : a })
        // console.log('maxList', maxList, 'max', zMax)
        const { digit, unitName, divideSum, toFixedLength } = Utils.checkSumRightUnit(max)
        // console.log('解析出的', 'digit', digit, 'unitName', unitName, 'divideSum', divideSum)
        const mDigit = (digit && digit > 10) ? digit : 10 // 最小 10 单位
        const upMax = (mDigit * (parseInt(max / mDigit) + 1)) / divideSum
        // console.log('mDigit', mDigit, 'upMax', upMax)
        // const textColorOne = '#fff'
        const textColorTwo = '#121847'
        const myChart = Echarts.init(document.getElementById('oneSelectCharts'))
        const option = {
          backgroundColor: '#f7f7f7',
          color: ['#3D85C6', '#FFD700', '#E5323E', '#3366FF', '#CC6633'],
          title: {
            // text: '业务主体运营关键数据趋势',
            left: 'left',
            top: '0',
            textStyle: {
              fontSize: '12',
              color: '#000'
            }
          },
          grid: {
            left: '100px',
            right: '100px'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['总里程', '车辆数', '平均里程']
          },
          yAxis: [
            {
              type: 'category',
              data: that.chartsData.map(function(item) {
                return item.fleetList
              }),
              axisPointer: {
                type: 'shadow'
              },
              // axisLabel: {
              //   formatter: function(value) {
              //     return '{styleOne|' + value + '}'
              //   },
              //   rich: {
              //     styleOne: {
              //       color: 'red',
              //       width: '60px'
              //     }
              //   }
              // },
              axisLabel: {
                color: textColorTwo, fontSize: 12, interval: 0
              },
              axisLine: {
                lineStyle: {
                  color: '#000000'
                }
              }
            },
            {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                textStyle: {
                  color: textColorTwo,
                  fontWeight: 'normal',
                  fontSize: '12'
                }
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: that.chartsData.map(function(item) {
                return item.fleetList
              })
            }
          ],
          xAxis: [
            {
              type: 'value',
              name: '里程/' + unitName + 'km',
              min: 0,
              max: upMax,
              interval: Math.ceil(upMax / 10),
              axisLabel: {
                color: textColorTwo, fontSize: 12, interval: 0
              },
              axisLine: {
                lineStyle: {
                  color: '#000000'
                }
              }
            }
            // {
            //   type: 'value',
            //   name: '百分比',
            //   min: 0,
            //   max: 100,
            //   interval: 20,
            //   axisLabel: {
            //     formatter: '{value} %'
            //   }
            // }
          ],
          series: [
            {
              name: '总里程',
              type: 'bar',
              // barGap: 0,
              itemStyle: {
                normal: {
                  show: true,
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#f7734e'
                  }, {
                    offset: 1,
                    color: '#e12945'
                  }]),
                  barBorderRadius: 50,
                  borderWidth: 0
                }
              },
              zlevel: 2,
              barWidth: '20%',
              label: { show: true, position: 'right', formatter: '{c}', color: textColorTwo },
              data: that.chartsData.map(function(item) {
                return (item.totalMiles / divideSum).toFixed(toFixedLength)
              })
            },
            {
              name: '车辆数',
              type: 'bar',
              // barGap: 0,
              itemStyle: {
                normal: {
                  show: true,
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#96d668'
                  }, {
                    offset: 1,
                    color: '#01babc'
                  }]),
                  barBorderRadius: 50,
                  borderWidth: 0
                }
              },
              zlevel: 2,
              barWidth: '20%',
              label: { show: true, position: 'right', formatter: '{c} 辆', color: textColorTwo },
              data: that.chartsData.map(function(item) {
                return item.vehiclesSum
              })
            },
            {
              name: '平均里程',
              type: 'bar',
              // barGap: 0,
              itemStyle: {
                normal: {
                  show: true,
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1a98f8'
                  }, {
                    offset: 1,
                    color: '#7049f0'
                  }]),
                  barBorderRadius: 50,
                  borderWidth: 0
                }
              },
              zlevel: 2,
              barWidth: '20%',
              label: { show: true, position: 'right', formatter: '{c}', color: textColorTwo },
              data: that.chartsData.map(function(item) {
                return (item.averageMiles / divideSum).toFixed(toFixedLength)
              })
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #oneSelectCharts{
    flex: 1;
    margin: 0 20px 0 0;
    min-width: 430px;
    max-width: 600px;
    min-height: 400px;
    /*max-height: 440px;*/
    height: auto;
  }
</style>
